<template>
  <div class="chat-input">
    <van-field v-model.trim="inputPrompt" placeholder="请输入">
      <template #button>
        <van-button size="small" type="primary" @click="chat">发 送</van-button>
        <!-- <div
          :class="['btn', { isDisabled: inputPrompt === '' }]"
          flex="main:center cross:center"
          @click="chat"
        >
          <img src="@/assets/images/send.svg" width="24" height="24" alt="" />
        </div> -->
      </template>
    </van-field>
  </div>
</template>

<script setup>
import { inputPrompt, chatApp } from './useChat'
import { showNotify } from 'vant'

const props = defineProps({
  isShare: {
    type: Boolean,
    default: false,
  },
})

function chat() {
  if (inputPrompt.value === '') {
    showNotify({ type: 'warning', message: '请输入内容' })
  } else {
    chatApp(props.isShare)
  }
}
</script>

<style lang="stylus" scoped>
.chat-input {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;

  .btn {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 8px;
    right: 26px;
    background-color: rgba(220, 238, 255, 1);
    border-radius: 50%;
    cursor: pointer;
  }

  .isDisabled{
    cursor not-allowed;
    background-color: rgba(220, 238, 255, .5);

    img{
      opacity .5;
    }
  }
}
</style>
